<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>➕💩🐖🥬🥬</title>
   
</head>
<body>
	<div style="position:sticky; z-index:-1;"  >
		<!-- <div class="milky">让优秀成为一种习惯</div> -->
	       
			<script type="importmap">
		  {
		    "imports": {
		      "three": "https://unpkg.com/three@0.150.1/build/three.module.js",
		      "three/addons/": "https://unpkg.com/three@0.150.1/examples/jsm/"
		    }
		  }
		</script>
			
	</div>
	
	 
	
	
	
<main style="top: 5%;">
	<p id="name">
	  <span id="n">生</span>
	  <span id="e">日</span>
	  <span id="o">快</span>
	  <span id="n2">乐</span>
	</p>
	 
</main>
<nav style="top: 12%;">
	<marquee behavior="alternate" style="z-index: -1;">叨叨叶</marquee>
</nav>
<header style="top: 20%;">
    <div class="cbtext">生日快乐</div>
	<marquee behavior="alternate">心想事成</marquee>
    <div class="cbtext" style="text-align: right;padding-right: 20px;">不只生日</div>
</header>
<nav style="top: 35%;">
    <div class="cbtext">独立坚强</div>
	<marquee behavior="alternate" direction="right">平安喜乐</marquee>
    <div class="cbtext" style="text-align: right;padding-right: 20px;">温暖善良</div>
</nav>
<footer style="top: 65%;">
    <div class="cbtext">青春不朽</div>
	<marquee behavior="alternate" scrollamount="10">一定上岸</marquee>
    <div class="cbtext" style="text-align: right;padding-right: 20px;">花花送给你</div>
</footer>

</body>
<script type="module">
    import * as THREE from "three";
    import { OrbitControls } from "three/addons/controls/OrbitControls.js";
    import { OBJLoader } from "three/addons/loaders/OBJLoader.js";

    let container;
    let camera, scene, renderer, controls;
    let manager;
    let object;
    let material = new THREE.MeshStandardMaterial({
        metalness: 0,
        roughness: 0.8,
        side: THREE.DoubleSide
    });

    init();
    animate();

    function init() {
        container = document.createElement("div");
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(
            50, //45
            window.innerWidth / window.innerHeight,
            1,
            2000
        );
		
        camera.position.y = 400;
        camera.position.z = 250;

        scene = new THREE.Scene();

        const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
        scene.add(ambientLight);

        const pointLight = new THREE.PointLight(0xffffff, 0.5);
        pointLight.castShadow = true;
        camera.add(pointLight);
        scene.add(camera);

        // manager
        function loadModel() {
            object.traverse(function (child) {
                if (child.isMesh) {
                    if (child.name == "rose") {
                        material = material.clone();
                        material.color.set("crimson");
                    } else if (child.name == "calyx") {
                        material = material.clone();
                        material.color.set("#001a14");
                    } else if (child.name == "leaf1" || child.name == "leaf2") {
                        material = material.clone();
                        material.color.set("#00331b");
                    }
                    child.material = material;
                }
            });
            object.rotation.set(0, Math.PI / 1.7, 0);
            object.receiveShadow = true;
            object.castShadow = true;
            scene.add(object);
        }

        manager = new THREE.LoadingManager(loadModel);

        // model
        function onProgress(xhr) {
            if (xhr.lengthComputable) {
                const percentComplete = (xhr.loaded / xhr.total) * 100;
            }
        }
        function onError() {}

        const loader = new OBJLoader(manager);
        loader.load(
            "https://happy358.github.io/Images/Model/red_rose3.obj",
            function (obj) {
                object = obj;
            },
            onProgress,
            onError
        );

        renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.outputEncoding = THREE.sRGBEncoding;
        renderer.shadowMap.enabled = true;
        container.appendChild(renderer.domElement);

        controls = new OrbitControls(camera, renderer.domElement);
        controls.autoRotate = true; //true
        controls.autoRotateSpeed = 2;
        controls.enableDamping = true;
        controls.enablePan = false;
        controls.minPolarAngle = 0;
        controls.maxPolarAngle = Math.PI / 2;
        controls.target.set(0, 0, 0);
        controls.update();

        window.addEventListener("resize", onWindowResize);
    }
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        render();
    }
    function render() {
        renderer.render(scene, camera);
    }

</script>
 <style>
        @import url("https://fonts.googleapis.com/css2?family=Niconne&display=swap");
        * {
            margin: 0;
            padding: 0;
        }
        body {
            position: relative;
            width: 100vw;
            height: 100vh;
            /* background: radial-gradient(circle, #82707a, #24111e 100%); */
			background: radial-gradient(circle 1000px at 50% 50%, #82707A 0%,#24111E 100%);
			
        }
        main {
            position: sticky;
            z-index: 1;
			height: 20vh;
        }
        h1 {
            font-family: "Niconne", cursive;
            font-size: 10vw;
            margin-left: 1rem;
            color: rgba(255, 255, 255, 0.2);
        }
       /* p {
            position: fixed;
            bottom: 0;
            margin: 10px;
            font-size: max(3.3vw, 15px);
            color: rgba(255, 255, 255, 0.5);
        } */
        
       canvas {
		   
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            position: fixed;
            
            top: 0;
            left: 0;
            margin: 5% 0 0 0;
            padding: 0;
            z-index: 0;
			
        }
		
        header {
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0 1% 1%;
            width: 100%;
            z-index: -1;
            height: 7em;
            font-family: "Bebas Neue", sans-serif;
            font-size: clamp(0.66rem, 2vw, 1rem);
            letter-spacing: 0.5em;
        }
		footer{
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 0 1% 1%;
			width: 100%;
			z-index: -1;
			height: 7em;
			font-family: "Bebas Neue", sans-serif;
			font-size: clamp(0.66rem, 2vw, 1rem);
			letter-spacing: 0.5em;
			
		}
		nav{
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 0 1% 1%;
			width: 100%;
			z-index: -1;
			height: 7em;
			font-family: "Bebas Neue", sans-serif;
			font-size: clamp(0.66rem, 2vw, 1rem);
			letter-spacing: 0.5em;
			
		}
        a{
            color: black;
            text-decoration: none;
        }
		
		.milky{
			top:10%;
			position: sticky;
		   font-size: 80px;   /*设置文字大小
		   color:#3366FF;  /*设置文字颜色*/
		   text-shadow: 0 8px 10px #6699FF;  /*设置文字阴影*/                  
		   font-weight: bolder;  /*设置文字宽度*/                              
		   text-align: center;  /*设置文字居中*/  
									   }
		marquee {
		                font-weight: bolder;
		                font-size: 40px;
		                color: white;
		            }
		.cbtext{
			width: 60%;
			font-size: 2vh;
			
			
			
		}										   
		@import url('https://fonts.googleapis.com/css2?family=Warnes&display=swap');
		@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
		
		:root {
		    --color : #42fff6
		}
		
		p#name {
		  background: none;
		  color: #999;
		  /* font-family: cursive,simsun,sans-serif; */
		  font-family: cursive,STXihei,serif;
		  font-size: 10vh;
		  letter-spacing: -2vh;
		  cursor: pointer;
		  text-align: center;
		  height: 20vh;
		}
		
		p#name:hover span {
		  animation: flicker 1s linear forwards;
		}
		
		p#name:hover #e {
		  animation-delay: .2s;
		}
		
		p#name:hover #o {
		  animation-delay: .5s;
		}
		
		p#name:hover #n2 {
		  animation-delay: .6s;
		}
		
		@keyframes flicker {
		  0% {
		    color: #333;
		  }
		  5%, 15%, 25%, 30%, 100% {
		    color: #fff;
		    text-shadow: 
		      0px 0px 5px var(--color),
		      0px 0px 10px var(--color),
		      0px 0px 20px var(--color),
		      0px 0px 50px var(--color);
		      
		  }
		  10%, 20% {
		    color: #333;
		    text-shadow: none;
		  }
		}
		

    </style>

</html>
